import { ExtractPropTypes, PropType } from 'vue'
import { TuniaoSize, TuniaoSizes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'
import { UPDATE_MODEL_EVENT } from '../../constants'
import { CheckboxGroupModelValue } from './type'

/**
 * props参数
 */
export const checkboxGroupProps = {
  /** modelValue */
  modelValue: {
    type: Array as PropType<CheckboxGroupModelValue>,
    default: (): CheckboxGroupModelValue => {
      return []
    }
  },
  /** 禁用选择 */
  disabled: {
    type: Boolean,
    default: false
  },
  /** 禁止点击标签进行选择 */
  disabledLabel: {
    type: Boolean,
    default: false
  },
  /** 选中时的颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  activeColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 多选框尺寸，同时设置宽高的值(内置sm、lg、xl), 默认单位为rpx */
  size: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value) || TuniaoSizes.includes(value as TuniaoSize)
    }
  },
  /** 每个checkbox所占宽度, 单位为rpx */
  width: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 是否换行显示 */
  wrap: {
    type: Boolean,
    default: false
  },
  /** 输入时是否触发表单验证 */
  validateEvent: {
    type: Boolean,
    default: false
  }
}
export type CheckboxGroupProps = ExtractPropTypes<typeof checkboxGroupProps>

export const checkboxGroupEmits = {
  [UPDATE_MODEL_EVENT]: (value: CheckboxGroupModelValue) => Array.isArray(value),
  change: (value: CheckboxGroupModelValue) => Array.isArray(value)
}
export type CheckboxGroupEmits = typeof checkboxGroupEmits
